<template>
  <view class="content">
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots autoplay interval="5000" circular>
      <swiper-item v-for="(item, index) in banner" :key="index">
        <view class="swiper-item uni-bg-red">
          <image :src="item.imageUrl" mode="" />
        </view>
      </swiper-item>
    </swiper>
    <!-- 搜索 -->
    <view class="search" @click="goSearch">
      <text class="iconfont icon-sousuo icon"></text>
      <text class="text" style="font-size: 24rpx; vertical-align: 8rpx"
        >搜索你想要听的歌曲</text
      >
    </view>
    <!-- 最新音乐 -->
    <view class="newMusic">
      <HeaderS title="最新音乐"></HeaderS>
      <NewMusic :newMusicList="newMusicList"></NewMusic>
    </view>
    <!-- 榜单 -->
    <view class="BanList">
      <HeaderS title="榜单"></HeaderS>
      <BanList :listData="topListData[0]" :musitList="musicItem[0]"></BanList>
      <BanList :listData="topListData[1]" :musitList="musicItem[1]"></BanList>
      <BanList :listData="topListData[2]" :musitList="musicItem[2]"></BanList>
      <BanList :listData="topListData[3]" :musitList="musicItem[3]"></BanList>
      <BanList :listData="topListData[4]" :musitList="musicItem[4]"></BanList>
    </view>
  </view>
</template>

<script>
import NewMusic from "../../components/Index/NewMuics"; //引入最新音乐
import HeaderS from "../../components/Index/HeaderS"; // 引入头部
import BanList from "../../components/Index/BanList"; //引入榜单
export default {
  components: {
    NewMusic, //最新音乐
    HeaderS, //头部
    BanList, //榜单
  },
  //监听分享
  onShareAppMessage(res) {
    console.log(res.from);
    if (res.from === "button") {
      // 来自页面内分享按钮
    }
    return {
      title: "燚淼音乐",
      path: "/pages/index/index",
    };
  },
  data() {
    return {
      banner: [], //轮播图数据
      newMusicList: [], //最新音乐数据
      topListData: [], //排行榜
      musicItem: [],
    };
  },
  onLoad() {
    this.getBanner(); //获取轮播图数据
    this.getNewMusic(); //获取最新音乐数据
    this.getToplist(); //获取排行榜
  },
  methods: {
    //获取轮播图数据
    getBanner() {
      this.request("/banner").then((res) => {
        this.banner = res.banners;
      });
    },
    //最新音乐数据
    getNewMusic() {
      this.request("/top/song", "GET", { type: 0 }).then((res) => {
        this.newMusicList = res.data.splice(0, 5);
      });
    },
    //获取排行榜
    getToplist() {
      this.request("/toplist").then((res) => {
        this.topListData = res.list.splice(0, 5);
        for (let i = 0; i < this.topListData.length; i++) {
          let id = this.topListData[i].id;
          this.getMusicData(id);
        }
      });
    },
    // 获取榜单里的音乐数据
    getMusicData(id) {
      this.request("/playlist/detail", "GET", { id }).then((res) => {
        let musicId = res.privileges.splice(0, 30);
        this.musicItem.push(musicId);
      });
    },
    // 跳转到搜索页面
    goSearch() {
      uni.navigateTo({
        url: "/pagesB/search/Search",
      });
    },
  },
};
</script>

<style lang="less">
.content {
  width: 100%;
  height: 100%;
  // 轮播图
  .swiper {
    width: 750rpx;
    height: 350rpx;
    .swiper-item {
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 搜索
  .search {
    margin: 0 auto;
    margin-top: 33rpx;
    width: 700rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background: #f8f8f8;
    border: 2rpx solid #ccc;
    line-height: 60rpx;
    color: #999;
    .icon {
      margin: 0 20rpx;
    }
  }
}
</style>
